<template>
  <div class="hello">
    <div>
      <button @click="getChecked">aaaa</button>
      <tree ref="tree" :default-expanded-keys="[10]" :default-checked-keys="[12]" :data="treeData" node-key='id' show-checkbox></tree>
      <tree ref="tree1" :expand-on-click-node="false" :render-content="renderContent" :default-expanded-keys="[10]" :default-checked-keys="[12]" :data="treeData" node-key='id1' show-checkbox></tree>
      <calendar v-model="value" showDateOnly minDate="2017-12-29" maxDate="2018-01-27" @on-day-click="onDayClick" @drawdate="onDrawDate" :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder"></calendar>
      <!-- <calendar @picked="picked"></calendar> -->
    </div>
    <div>
      {{selectList}}
    </div>
    <table style="margin:30px 0;" class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>地址</th>
          <th width="120px"><drop-down-filter value="" :data="[{name:'电话',value:''},{name:'13666666666',value:'1366666666'},{name:'13777777777',value:'13777777777'}]"></drop-down-filter></th>
          <th width="60px">
            <drop-down-filter value="" :data="[{name:'状态',value:''},{name:'可用',value:'1'},{name:'不可用',value:'0'}]"></drop-down-filter>
          </th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="i in 10" :key="i">
          <td>Meric</td>
          <td>男</td>
          <td>民族大道北1201号</td>
          <td>13666666666</td>
          <td>可用</td>
          <td>
            <a class="btn btn-default" href="#" role="button" @click="showDialog">Link</a>
            <button class="btn btn-default" type="submit" @click="showAddressBookDialog">地址本</button>
            <input class="btn btn-default" type="button" value="Input">
            <input class="btn btn-default" type="submit" value="Submit">
          </td>
        </tr>
      </tbody>
    </table>
    <MPagination
      :page-index="currentPage" 
      :total="count" 
      :page-size="pageSize" 
      @change="pageChange"
    ></MPagination>
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
// import Calendar from "@/components/Datepicker";
import MPagination from '@/components/Pagination'
import DropDownFilter from '@/components/DropDownFilter'
import Demo from '@/views/Demo'
import AddressBook from '@/components/AddressBook'
// import Utils from '@/utils'
import Calendar from '@/components/vue2-slot-calendar/Calendar'
import Tree from '@/components/tree/tree'
import TableTree from '@/components/tree/table-tree'
export default {
  name: "HelloWorld",
  data() {
    return {
      lazy:true,
      propsName: [
        {
          key: "label",
          name: "名称",
          width: "220px",
          headerAlign:'center',
          align: "left"
        },
        {
          key: "age",
          name: "年龄",
          width: "220px",
          headerAlign:'center',
          align: "center"
        }
      ],
      treeData:[
        {
            id:10,
            age: 23,
            label:'节点1',
            children:[
                {
                    id:11,
                    age: 23,
                    label:'节点1-1',
                    children:[],
                    disabled:true
                },
                {
                    id:12,
                    age: 23,
                    label:'节点1-2',
                    disabled:true,
                    children:[
                        {
                            id:121,
                            age: 23,
                            label:'节点1-2-1',
                            children:[]
                        } 
                    ]
                }
            ]
        }
      ],
      selectList:[],
      currentPage:2,
      count:200,
      pageSize:12,
      msg: "Welcome to Your Vue.js App",
      value:'',
      disabled:[],
      format:'yyyy-MM-dd',
      clear:true,
      placeholder:'请选择时间',
      dialogComponent:null
    };
  },
  components: {
    Calendar,
    MPagination,
    DropDownFilter,
    Demo,
    Tree,
    TableTree
  },
  methods:{
    pageChange(page){
      this.currentPage = page;
    },
    onDrawDate (e) {
      let date = e.date
      if (new Date().getTime() > date.getTime()) {
        e.allowSelect = false
      }
    },
    onDayClick(val){
      console.log(val)
    },
    showAddressBookDialog(){
      let layerDialog = Utils.layerBox.layerDialogOpen({
          title: '人员选择器',
          btn:['确定','取消'],
          maxmin: false, //开启最大化最小化按钮
          area: ['860px', '590px'],
          btn1:(index,layero)=>{
            this.dialogComponent&&this.dialogComponent.$children[0].doSubmit&&this.dialogComponent.$children[0].doSubmit();
          },
          btn2:(index,layero)=>{
            this.dialogComponent&&this.dialogComponent.$children[0].doCancel&&this.dialogComponent.$children[0].doCancel();
          }
        });
        this.dialogComponent = Utils.layerBox.layerLoadVueComponent({layer:layerDialog,component:AddressBook,methods:{
            doComfirm:(result)=>{
              //doComfirm可获取组件页面传过来的参数，作用：例如执行回调方法或者传递结果到父组件
              this.selectList = result
              layer.close(layerDialog);//关闭对话框
            },
            doClose:()=>{
                layer.close(layerDialog);//关闭对话框
            }
          },
          //传递本组件的参数给对话框组件，对话框组件通过props属性params获取值,例如下面这个val属性取值：this.params.val
          props:{
            type:'2',//1:部门,2://人员,3:部门和人员
            selectedIds:['u_925648638316589056'],
            getIds:(result)=>{
              console.log(result);
            },
            getNames:(result)=>{
              console.log(result);
            }
          }});
    },
    showDialog(){
      /**
       * 对话框的使用说明
       * 本对话框使用是封装的layer弹框，从而兼容vue。
       * 其中要注意的地方有如果需要弹出vue组件，则需使用Utils.layerBox.layerLoadVueComponent,参数说明请查看目录src/utils/index.js的layerLoadVueComponent方法
       * layer对话框下面两个按钮“确认”和“取消”按钮的事件分别为layer.open里的参数方法btn1和btn2，再分别对应vue组件里面的doSubmit和doCancel
       * 注意：layer弹框有两个按钮时，doSubmit和doCancel时必须的，不管功能是不是提交或者取消，组件里面的方法名都叫doSubmit和doCancel
       */
      let layerDialog = Utils.layerBox.layerDialogOpen({
        title: '很多时候，我们想最大化看，比如像这个页面。',
        btn:['确定','取消'],
        maxmin: false, //开启最大化最小化按钮
        area: ['693px', '500px'],
        btn1:(index,layero)=>{
          this.dialogComponent&&this.dialogComponent.$children[0].doSubmit&&this.dialogComponent.$children[0].doSubmit();
        },
        btn2:(index,layero)=>{
          this.dialogComponent&&this.dialogComponent.$children[0].doCancel&&this.dialogComponent.$children[0].doCancel();
        }
      });
      this.dialogComponent = Utils.layerBox.layerLoadVueComponent({layer:layerDialog,component:Demo,methods:{
          doComfirm:(result)=>{
            //doComfirm可获取组件页面传过来的参数，作用：例如执行回调方法或者传递结果到父组件
            layer.close(layerDialog);//关闭对话框
          },
          doClose:()=>{
              layer.close(layerDialog);//关闭对话框
          }
        },
        //传递本组件的参数给对话框组件，对话框组件通过props属性params获取值,例如下面这个val属性取值：this.params.val
        props:{
          val:'123'
        }});
    },
    loadData(node,resolve){
        if(node.level === 0) return resolve(this.treeData);
        setTimeout(()=>{
            const data = [{
                id:new Date().getTime(),
                age: 23,
                label:`节点${new Date().getTime()+100}`,
                leaf:true
            },{
                id:new Date().getTime()+110,
                age: 23,
                label:`节点${new Date().getTime()+110}`,
                leaf:true
            }]
            resolve(data);
        },300);
    },
    setTreeNodeChecked(){
      this.$refs.tree.setCheckedNodes([
        {
          id:12,
          age: 23,
          label:'节点1-2',
        }
      ]);
    },
    getChecked(msg){
      console.log(msg,this.$refs.tree.getCheckedNodes(true));
    },
    renderContent(h,{ node, data, store }){
      console.log(node.level)
      const column1Style = {
        width:`calc(100% - ${(node.level==1?0:node.level)*15}px)`,
        display:'flex'
      }
      return (
        <div style="width:100%;text-align:left;">
          <span style={`display:inline-block;width:calc(35% + ${0.35*(node.level==1?0:(node.level-1))*16}px - ${(node.level==1?0:(node.level-1))*16}px)`}>{data.label}</span>
          <span style={`display:inline-block;width:calc(30% + ${0.3*(node.level==1?0:(node.level-1))*16}px)`}>{data.age}</span>
          <span style={`display:inline-block;width:calc(35% + ${0.35*(node.level==1?0:(node.level-1))*16}px)`}>
            <button onClick={this.getChecked.bind(this,'hello')}>编辑</button>
            <button>删除</button>
          </span>
      </div>
      );
    }
  },
  mounted(){
    layer.alert("222222222222222222")
    layer.msg("aaaaa")
    if(!this.lazy){
      this.setTreeNodeChecked();
      this.$nextTick(()=>{
        console.log(this.$refs.tree.getCheckedKeys());
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
